<template>
	<view class="balance">
		<view class="balance_top">
			<text class="balance_top_text1">账户积分（元）</text>
			<text class="balance_top_text2">{{user.user_money}}</text>
		</view>
		<view class="balance_center">
			<button type="default" class="balance_center_btn1" @click="withto">提现</button>
			<button type="default" class="balance_center_btn2" @click="rechto">充值</button>
		</view>
		<view class="balance_bottom">
			<view class="balance_bottom_flex" style="margin-bottom: 40rpx;" @click="recoto">
				<text>提现记录</text>
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/drop-down2.png" mode=""></image>
			</view>
			<view class="balance_bottom_flex" @click="detailedto">
				<text>余额明细</text>
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/drop-down2.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {GetUserInfo} from '@/config/api.js';
	export default {
		data() {
			return {
				user:{},
			}
		},
		onShow() {
			this.get_user_info()
		},
		methods: {
			//获取用户信息
			async get_user_info(){
				// post请求
				const data = await GetUserInfo()
				if(data.code==200){
					this.user=data.data.user
				}else{
					this.$u.toast(data.msg)
				}
			},
			//跳转至提现页面
			withto(){
				this.$u.route({
					url:'pages/center/balance/Withdrawal',
					type:'navigateTo'
				})
			},
			//跳转至充值页面
			rechto(){
				this.$u.route({
					url:'pages/center/balance/Recharge',
					type:'navigateTo'
				})
			},
			//跳转至提现记录
			recoto(){
				this.$u.route({
					url:'pages/center/balance/WithdrawalRecord',
					type:'navigateTo'
				})
			},
			//跳转至余额明细
			detailedto(){
				this.$u.route({
					url:'pages/center/balance/detailed',
					type:'navigateTo'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balance{
		border-top: 1px solid #F3F3F3;
		padding: 20rpx 20rpx 0 20rpx;
		.balance_top{
			height: 270rpx;
			border-radius:20rpx;
			position: relative;
			padding: 20rpx 30rpx;
			display: flex;
			flex-direction: column;
			background:#487AEB url(https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/money.png) right top/173rpx 187rpx no-repeat;
			.balance_top_text1{
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
			.balance_top_text2{
				font-size: 78rpx;
				color: #FFFFFF;
				margin-top: 50rpx;
			}
		}
		.balance_center{
			margin: 0 auto;
			display: flex;
			margin-top: 20rpx;
			.balance_center_btn1{
				flex: 1;
				height: 78rpx;
				margin-right: 20rpx;
				background-color: #525252;
				line-height: 78rpx;
				font-size: 28rpx;
				color: #fff;
				border-radius: 10px;
			}
			.balance_center_btn2{
				flex: 1;
				height: 78rpx;
				background-color:#FF4362 ;
				line-height: 78rpx;
				font-size: 28rpx;
				color: #fff;
				border-radius: 10px;
			}
		}
		.balance_bottom{
			margin: 0 auto;
			border: 1px solid #F3F3F3;
			margin-top: 20rpx;
			padding: 30rpx;
			box-shadow: $global-shade;
			background: #fff;
			border-radius: 10rpx;
			.balance_bottom_flex{
				width: 100%;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;
				color: #525252;
				image{
					width: 10rpx;
					height: 18rpx;
				}
			}
		}
	}
</style>
